<template>
  <div class="mind-map-container">
    <div ref="mindMapContainer" class="mind-map"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MindMap from 'simple-mind-map'

const mindMapContainer = ref(null)

// 四级脑图数据结构（含进度值）
const mindData = {
  data: {
    text: '根节点',
    progress: 100,
    isActive: true
  },
  children: [
    {
      data: {
        text: '一级节点1',
        progress: 75,
        expand: true
      },
      children: [
        {
          data: {
            text: '二级节点1',
            progress: 50,
            expand: true
          },
          children: [
            {
              data: {
                text: '三级节点1',
                progress: 25,
                expand: true
              },
              children: [
                {
                  data: {
                    text: '四级节点1',
                    progress: 10
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      data: {
        text: '一级节点2',
        progress: 60
      }
    }
  ]
}

onMounted(() => {
  new MindMap({
    el: mindMapContainer.value,
    data: mindData,
    expand: true,
    enableCustomNodeContent: true,
    expandBtnStyle: {
      open: { fill: '#000' },
      close: { fill: '#000' },
      size: 14
    },
    initRootNodePosition:['20%','50%'],
    themeConfig: {
        lineColor: '#0064FF',
        // 根节点样式
        root: {
            fillColor: '#2E7CF4',
            borderColor: '#2E7CF4', 
            color: '#fff',        
            borderWidth: 1,      
            borderDasharray: 'none',
            fontSize: 16,
            borderRadius: 5,
            paddingX: 20,
            paddingY: 10
        },
        // 二级节点样式（实际对应一级子节点）
        second: {
            fillColor: '#8AB2FF',
            borderColor: '#8AB2FF', 
            color: '#fff',        
            borderWidth: 1,      
            borderDasharray: 'none',
            fontSize: 16,
            borderRadius: 5,
            paddingX: 20,
            paddingY: 10
        },
        // 三级及以下节点样式
        node: {
            fillColor: 'transparent', // 透明背景
            borderColor: '#2E7CF4',    // 边框颜色
            borderWidth: 1,           // 边框宽度
            borderDasharray: 'none',  // 实线边框
            color: '#343B53',
            fontSize: 16,
            borderRadius: 5,
            paddingX: 20,
            paddingY: 10
        }
    }
  })
})
</script>

<style scoped>
.mind-map-container {
  width: 100%;
  min-height: 70vh;
  position: relative;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.mind-map {
  width: 100%;
  height: 100%;
  overflow: visible;
}
:deep(.smm-main) {
  direction: rtl; /* 从右向左布局 */
}
</style>